<template>
  <div id="sparepartstreminder">
    <div class="page-header">
      <span class="title-item">备件更换提醒</span>
      <span class="download-btn" v-if="false">
        <a-icon type="cloud-download" />导出数据
      </span>
    </div>
    <a-form-model layout="inline" :modal="data" @submit="handleSubmit" @submit.native.prevent :colon="false" style="margin: 10px 0">
      <a-form-model-item label="关键字">
        <a-input v-model="data.searchKey" placeholder="请输入企业/排口/备件" allowClear/>
      </a-form-model-item>
      <a-form-model-item>
        <a-button type="primary" html-type="submit">搜索</a-button>
      </a-form-model-item>
    </a-form-model>
    <my-table :columns="columns" :data-source="tipsList"  :pagination="false" :rowKey="record=> record.id">
      <a slot="name" slot-scope="text">{{ text }}</a>

      <span slot="action" class="action" slot-scope="text,record,index">
        <!--<a class="progress">设备详情</a> -->
        <a-button type="primary" @click="showModal(text,record,index)">更改设定</a-button>
        <a-button type="primary">手动提醒</a-button>
      </span>
    </my-table>
    <div class="bottompage">
      <a-pagination
        v-model="data.currentPage"
        :total="total"
        :item-render="itemRender"
        :show-total="total => `共 ${total} 条记录`"
        :defaultPageSize="data.pageSize"
        @change="pagechangeFns"
      />
    </div>
    <!-- 模态框 -->
    <div>
      <a-modal v-model="visible" title="更改设定" @ok="handleOk" centered width="30%">
        <a-form layout="horizontal" :colon="false">
          <a-row type="flex" justify="center">
            <a-col>
              <a-form-item label="预计寿命" :label-col="{span: 9}" :wrapper-col="{span:15}">
                <a-input class="inline-input" autocomplete="off" v-model="predays" disabled></a-input>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row type="flex" justify="center">
            <a-col>
              <a-form-item label="更改使用天数" :label-col="{span: 9}" :wrapper-col="{span:14}">
                <a-input class="inline-input" autocomplete="off" v-model="submit.expectedLife"></a-input>
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
        <template slot="footer">
        <a-button type="primary"  @click="handleOk">确认</a-button>
      </template>
      </a-modal>
    </div>
  </div>
</template>

<script>
import moment from "moment";
export default {
  name: "",
  components: {},
  props: {},
  data() {
    return {
      data: {
        currentPage: 1,
        pageSize: 10,
        type:1,
        searchKey:""  // 关键字搜索
      },
      columns: [
        {
          title: "序号",
          dataIndex: "id",
          key: "id",
          align: "center",
          customRender: (text, record, index) =>
            `${(this.data.currentPage - 1) * this.data.pageSize + index + 1}`,
        },
        {
          title: "企业名称",
          key: "companyName",
          dataIndex: "companyName",
          align: "center",
        },
        {
          title: "排口",
          dataIndex: "monitorName",
          key: "monitorName",
          align: "center",
        },
        {
          title: "备件名称",
          dataIndex: "name",
          key: "name",
          align: "center",
        },
        {
          title: "启用时间",
          dataIndex: "startTime",
          key: "startTime",
          align: "center",
        },
        {
          title: "结束时间",
          dataIndex: "endTime",
          key: "endTime",
          align: "center",
        },
        {
          title: "预计使用寿命(/天)",
          dataIndex: "useDays",
          key: "useDays",
          align: "center",
          ellipsis: true,
        }
      ],
      total: 0,
      visible: false,
      tipsList: [], //提醒列表
      predays: 0, //模态框预计寿命
      submit: {
        //模态框提交请求参数
        spareMn: "",
        expectedLife: "",
      },
    };
  },
  created() {},
  mounted() {
    this.getTips();
  },
  activited() {},
  update() {},
  beforeRouteUpdate() {},
  methods: {
    handleSubmit(){
      this.data.currentPage = 1;
      this.getTips();
    },
    // 分页
    itemRender(current, type, originalElement) {
      if (type === "prev") {
        return <a>上一页</a>;
      } else if (type === "next") {
        return <a>下一页</a>;
      }
      return originalElement;
    },
    //获取设备更改提醒信息的列表
    getTips() {
      this.$api.getReplaceInfo(this.data).then((res) => {
        this.tipsList = res.data.data.records;
        this.total = res.data.data.total;
        this.tipsList.forEach((v) => {
          if(v.startTime !==  null){
             v.startTime = moment(v.startTime).format("YYYY-MM-DD");
            v.endTime = moment(v.endTime).format("YYYY-MM-DD");
          }
        });
        console.log(res);
      });
    },
    //模态框
    showModal(data) {
      this.visible = true;
      console.log(data)
      this.predays = data.expectedLife;
      this.submit.spareMn = data.equipmentSequence;
      console.log(this.submit.spareMn);
    },
    //更改时间
    handleOk() {
      this.visible = false;
      console.log(this.submit);
      this.$api.PostupdateExpectedLife(this.submit).then((res) => {
        if(res.data.code == 0){
          this.$message.success(res.data.errorMessage);
          this.submit.expectedLife = "";
          this.getTips()
        }
        else{
          this.$message.error(res.data.errorMessage);
        }
      })

    },

    //分页
    pagechangeFns(page, pageSize) {
      this.data.currentPage = page;
      this.data.pageSize = pageSize;
      this.getTips();
    },
  },

  filter: {},
  computed: {},
  watch: {},
};
</script>
<style scoped src="../../../assets/style/warning.css"></style>
<style scoped lang="scss" >
::v-deep .ant-table-tbody > tr > td:nth-child(2) {
  padding: 0px;
  height: 60px;
}
.ant-input[disabled] {
  color: rgba(255, 255, 255, 0.6);
  background-color: #2c4945;
}
#sparepartstreminder {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 1%;
  box-sizing: border-box;
  .page-header{
    height: auto;
    margin: 0;
    padding: 0;
  }
}

#sparepartstreminder .bottompage {
  position: absolute;
  right: 1%;
  bottom: 10px;
}
.clickRowStyl {
  background-color: red;
}
#sparepartstreminder .action {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}
#sparepartstreminder .progress {
  color: #307066;
  font-weight: 600;
  font-size: 16px;
}


</style>
